<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!-- header -->
<jsp:include page="../include/header.jsp"></jsp:include>
	<header id="header">

	<!--/header-middle-->
	<jsp:include page="../include/header_middle.jsp"></jsp:include>		
	
	<!--header-bottom-->
	<jsp:include page="../include/header_bottom.jsp"></jsp:include>	
	<!--/header-bottom-->
	
	</header>
	<!--/header-->
	
	<section>
		<div class="container">
			<div class="row">
				<div class="col-sm-2">
					
				</div>

			<div class="col-sm-9 padding-right">
				<!--각자 삽입할 부분-->
				<div id="board_info">
					<table class="table table-bordered">
						<tr>
							<td width="10%" align="center">글번호</td>
							<td width="15%" align="center">${ board.board_no }</td>
							<td width="10%" align="center">제목</td>
							<td width="45%">${ board.board_title }</td>
							<td width="10%" align="center">조회수</td>
							<td width="10%" align="center">${ board.board_show }</td>
						</tr>

						<tr>
							<td align="center">등록일</td>
							<td align="center">${ board.board_date }</td>
							<td align="center">게시자</td>
							<td>${ board.board_nickname }(${ board.board_id })</td>
							<td align="center"><a id="b_recommend"> [추천]</a></td>
							<td align="center"><div id="b_rec_conut">${ board.board_recommend }</div></td>
						</tr>

						<tr>
							<td colspan="6" bgcolor="#fe980f"></td>
						</tr>

						<tr>
							<td colspan="6">
								${ board.board_content }
							</td>
						</tr>


					</table>
					<form name="f" id="f" method="post">
							<input type="hidden" id="boardno" name="boardno" value="${ board.board_no }" />
						<c:if test="${ isSame }">
							<button type="button" class="btn btn-primary btn-lg" onclick="fix()">수정</button>
							&nbsp;&nbsp;&nbsp;
							<button type="button" class="btn btn-primary btn-lg" onclick="del()">삭제</button>
							&nbsp;&nbsp;&nbsp;
						</c:if>
						<button type="button" class="btn btn-primary btn-lg" onclick="list()">목록</button>
					</form>
				</div>
				<br /> 
				<br /> 
				<br />
				
				<h5>답글 목록</h5>
				<div id="reply_info">
					<table class="table table-striped">
						<tr>
							<td align="center" width="30%">작성자</td>
							<td width="50%">내용</td>
							<td align="center" width="10%">추천수</td>
							<td align="center" width="10%">작성일</td>
						</tr>
						<c:forEach items="${ reply }" var="reply">
							<tr>
								<td align="center">(${ reply.breply_id })</td>
								<td>${ reply.breply_content }</td>
								<td align="center"><div id="div_${ reply.breply_no }">${ reply.breply_recommend }<a id="${ reply.breply_no }"> [추천]</a></div></td>
								<td align="center">${ reply.breply_date }</td>
							</tr>
						</c:forEach>
					</table>
				</div>
				<br />
				
				<c:if test="${ isLogin }">
				<div id="reply_form">
					<h5>답글쓰기</h5>
						<table class='table table-bordered'>
								<tr>
									<td width="10%" align="center">내용</td>
									<td width="80%">
										<input type="text" name="r_content" id="r_content" class="col-lg-12" />
									</td>
									<td width="10%" align="center">
										<button type="button" id="r_write_btn">작성</button>
									</td>
								</tr>
							</table>
					<br /> <br /> <br />
				</div>
				</c:if>

				<!--삽입 끝 -->
			</div>
		</div>
		</div>
	</section>
	
	<script type="text/javascript">
		function fix(){
			document.f.action="boardmodifyform";
			document.f.submit();
		}

		function del(){
			document.f.action="boarddelete";
			document.f.submit();
		}

		function list(){
			location.href="/ecom/board/boardlist?pageno=1&pagetype=all";
		}
		
		$(function(){
			// 답글 쓰기
			$('#r_write_btn').click(function() {
				var boardno = document.getElementById("boardno").value;
				var content = document.getElementById("r_content").value;

				$.getJSON(
					"replyWrite",
					{boardno : boardno, content : content},
					function(replyJsonArray){
						var html = "";
						
						html += "<table class='table table-striped'>";
						html += "<tr>";
						html += "<td align='center' width='30%'>작성자</td>";
						html += "<td width='50%'>내용</td>";
						html += "<td align='center' width='10%'>추천수</td>";
						html += "<td align='center' width='10%'>작성일</td>";
						html += "</tr>";
						
						$.each(replyJsonArray, function(index, replyJson){
							html += "<tr>";
							html += "<td align='center'>(" + replyJson.breply_id + ")</td>";
							html += "<td>" + replyJson.breply_content + "</td>";
							html += "<td align='center'>" + replyJson.breply_recommend + "<a id='" + replyJson.breply_no + "'> [추천]</a></td>";
							html += "<td align='center'>" + replyJson.breply_date + "</td>";
							html += "</tr>";
						});
						
						html += "</table>";
						
						$('#reply_info').html(html);
						document.getElementById("r_content").value = "";
				});
			});
			
			$('#b_recommend').click(function() {
				var boardno = document.getElementById("boardno").value;

				$.ajax({
					url:'boardRecommend?boardno=' + boardno,
				    type:'GET',				   
				    dataType:'text',
					success:function(recommend){
						$('#b_rec_conut').html(recommend);
					}
				});
			});
			
			$('#reply_info a').click(function(event) {
				var boardno = document.getElementById("boardno").value;
				var replyno = $(event.target).attr('id'); 
				
				$.ajax({
					url:"replyRecommend?boardno=" + boardno + "&replyno=" + replyno,
					type:"GET",
					dataType:"text",
					success:function(recommend){
						$('#div_' + replyno).html(recommend + "<a id='" + replyno + "'> [추천]</a>");
					}
				});
			});
		});
	</script>
	
	<!--Footer-->
	<jsp:include page="../include/footer.jsp"></jsp:include>
	<!--/Footer-->